<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@page import="pos.domain.Mapa"%>
<%@page import="java.util.List"%>
<%@page import="pos.domain.Punto"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Mapa</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA1Fkmtwb6Gbw2l7hbf5oy-xSDK3amjTa-ZtSftyX4bagUaRpnghT9LrbWnsnt5RA3OlV5ZfgfzJ7rWA" type="text/javascript"></script>

 <script type="text/javascript">
function load() {
  if (GBrowserIsCompatible()) {
    var latitud = 37.35705927979369;   //esta latitud y longitud sirve para iniciar el 
    var longitud = -5.99853515625;	   //mapa por esa zona
    var zoom = 10; // el zoom con lo que queremos inicializar el mapa 
    var mapa = new GMap2(document.getElementById("mapa"));
    mapa.setCenter(new GLatLng(latitud, longitud), zoom);
    mapa.addControl(new GSmallMapControl());
    mapa.addControl(new GMapTypeControl());


	<% List<Punto> puntos = (new Mapa()).getPuntos(); 
	for(Punto p : puntos){  //con este for recorremos todos los puntos que existen el
							//el mapa y los mostramos todos juntos en dicho mapa
	%>
	
	 var center= new GPoint(<%=p.getLongitud()%>,<%=p.getLatitud()%>);
	
		var miIcono = new GIcon(G_DEFAULT_ICON);
	
	miIcono.image = "<%=p.getIcono()%>";
//miIcono.image="http://google-maps-icons.googlecode.com/files/steakhouse.png";
	 var marker = new GMarker(center,miIcono);


			
     mapa.addOverlay(marker); 

     GEvent.addListener(marker, "click", function() {
		 var lati = this.getPoint().lat();	//sacamos longitud y latitud del punto del mapa de google
		 var longi= this.getPoint().lng();
		 var outstring = "mapaPruebaMorena.jsp?longitud="+longi; 
		 outstring+="&latitud="+lati;
		 
	        this.openInfoWindowHtml("<a href="+outstring+">Obtener informacion del punto</a>");
	      });

<%
	}
	%>

	
    GEvent.addListener(mapa, "click", function(marcador, punto) { //utilizamos esta funcion para insertar un punto en la base de datos
        														
  	  var nuevoMarcador = new GMarker(punto);
  	  GEvent.addListener(nuevoMarcador, "click", function() {
			var latitud = this.getPoint().lat();	//sacamos longitud y latitud del punto del mapa de google
			var longitud = this.getPoint().lng();

			 var outstring = "FrontController?res=formularioPunto.jsp?longitud="+longitud; 
			 var url2="content.jsp";
			 outstring+="&latitud="+latitud;						//creamos la url que nos redireccionara a la pagina 
																	//que se encuentra el formulario para insertar el punto.
			 var url = "location.href='"+outstring+"'";
	       	    this.openInfoWindowHtml( "<a href="+outstring+">insertar</a>"
     	       	    
					 );
				 
  	  });
  	  mapa.addOverlay(nuevoMarcador);
  	});
		}
	}



</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="mapa" style="width: 500px; height: 400px"></div>

<%
		//var url = "location.href='"+outstring+"'";
   		//this.openInfoWindowHtml("Lat: " + 
	    //latitud + "<br/>Lon: " + 
	    //longitud+   "<a href="+outstring+">insertar</a>" + "<a href="+url+">mostrar los datos del punto</a>"
	    
	 //);

%>


</body>
</html>